<template>
	<view class="">
		<view class="head">
			<view class="">
				<view class="" style="font-size: 60rpx;margin-top: 40rpx;margin-bottom: 20rpx;">3.50</view>
				<text>业绩比较基准</text>
			</view>
			<view class="bottom">
				<view class="">
					<view class="" style="font-size: 40rpx;margin-bottom: 10rpx;">28</view>
					<text>产品期限(天)</text>
				</view>
				<view class="">
					<view class="" style="font-size: 40rpx;margin-bottom: 10rpx;">50000</view>
					<text>起购金额</text>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="titleOne">
				<view class="hr"></view>
				<text class="title_text">投资周期</text>
			</view>
			<view class="card">
				<view class="ball_fa">
					······
					<view class="ball_blue ball"></view>
					···················
					<view class="ball"></view>
					···················
					<view class="ball"></view>
					····················
					<view class="ball"></view>
					·······
				</view>
				<view style="display: flex;justify-content: space-between;color: #999999;margin-top: 15rpx;">
					<view style="text-align: center;" v-for="(item,index) in cycle" :key="index">
						<view class="">{{item.text}}</view>
						<view class="data">{{item.data}}</view>
					</view>
				</view>
				<view class="card_main">
					<view style="color: #cccccc;width: 35%;">购买说明</view>
					<view style="color: #666666;line-height: 45rpx;">
						<text>每28天为一期,可在到期开放日追加购买或领取;若位领取则默认持续存至下一期</text>
						<view class="">
							*当期实际期限以投资周期展示位准，收益按当期实际计息天数计算
						</view>
					</view>
				</view>
			</view>

			<view class="titleOne">
				<view class="hr"></view>
				<text class="title_text">安全保障</text>
			</view>
			<view class="card" style="color: #666666;font-size: 22rpx;">
				<view style="width: 100%;display: flex;justify-content: space-between;">
					<view style="text-align: center;" v-for="item in card_img" :key="item.id">
						<view class="quan">
							<image class="logo" :src="item.img" mode=""></image>
						</view>
						<view style="margin-top: 20rpx;">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="explain">
					该产品属于债券型资管产品，风险较低
				</view>
			</view>

			<view class="title_two">
				<block v-for="item in information" :key="item.id">
					<view class="" v-if="item.pd==true" style="margin-right: 35rpx;text-align: center;">
						<view class="info">{{item.text}}</view>
						<view class="hr_x"></view>
					</view>
					<view @click="changMain(item.id)" class="" v-else style="margin-right: 35rpx;text-align: center;">
						<view style="color: #666666;font-size: 22rpx;margin-top: 12rpx;">{{item.text}}</view>
					</view>
				</block>
			</view>

			<!-- 交易规则 -->
			<view v-if="xz=='one'" class="card" style="font-size: 22rpx;">
				<view style="padding-bottom: 24rpx;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;">购买与领取</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">购买说明</view>
					<view style="width: 80%;">50000元起购</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">领取金额</view>
					<view style="width: 80%;">1000元起购，剩余金额不低于1000元</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">到账说明</view>
					<view style="line-height: 44rpx;width: 80%;">资金将在领取后的2个交易日内回到原购买银行卡</view>
				</view>
				<view style="padding-top: 24rpx;width: 100%;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">开放日</view>
					<view style="line-height: 44rpx;width: 80%;">
						可在开放日10点-15点领取，也可在开放日之前预约领取；若未领则默认续存至下一期，如开放日遇到非交易日，可能顺延或提前开放，手机按实际计息天数计算</view>
				</view>
			</view>
			<!-- 收益与费用 -->
			<view v-if="xz=='one'" class="card">
				<view style="padding-bottom: 24rpx;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;">收益与费用</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">收益规则</view>
					<view style="line-height: 44rpx;width: 80%;">购买的下一个交易日开始计算收益，节假日照常计算；收益每日累积、按周期发放
						(28天)，现金收益将在2个交易日内直接发放至原购买银行卡</view>
				</view>
				<view style="padding-top: 24rpx;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">费用规则</view>
					<view style="width: 80%;">购买及领取均无手续费</view>
				</view>
			</view>
			<view v-if="xz=='one'" class="card">
				<view style="padding-bottom: 24rpx;font-size: 28rpx;">支持银行</view>
				<uni-table stripe emptyText="暂无更多数据" border stripe>
					<uni-tr>
						<uni-th align="center">银行列表</uni-th>
						<uni-th align="center">单笔限额(元)</uni-th>
						<uni-th align="center">单日限额(元)</uni-th>
					</uni-tr>
					<uni-tr v-for="item in yhList" :key="item.id">
						<uni-td>
							<image class="yh_icon" :src="item.icon" mode=""></image>
							<text>{{item.text}}</text>
						</uni-td>
						<uni-td>
							{{item.onceNum}}
						</uni-td>
						<uni-td>
							{{item.oneDay}}
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>


			<!-- 信息披露 -->
			<view v-if="xz=='two'" class="card" style="font-size: 22rpx;">
				<view style="padding-bottom: 24rpx;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;">基本信息</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">产品类型</view>
					<view style="width: 80%;">券商集合资产管理计划</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">产品名称</view>
					<view style="width: 80%;">齐鲁锦泉28天</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">成立日期</view>
					<view style="line-height: 44rpx;width: 80%;">2012年9月18日</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">管理人</view>
					<view style="line-height: 44rpx;width: 80%;">齐鲁证券(上海)资产管理有限公司</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">托管人</view>
					<view style="line-height: 44rpx;width: 80%;">中国建设银行股份有限公司</view>
				</view>
				<view style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">投资范围</view>
					<view style="line-height: 44rpx;width: 80%;">主要投资于固定收益类资产，包括国债、央行票据、金融债、公司债、企业债、可转换债券，资产支持证券，股票质押式回购等，安全性高</view>
				</view>
				<view style="padding: 24rpx 0;font-size: 28rpx;display: flex;">
					<view style="color: #cccccc;width: 20%;">基金经理</view>
					<view style="line-height: 44rpx;width: 80%;">商园波先生，上海财经大学金融学硕士，历任上海银行金融市场部理财业务交易员、已精灵开放式理财产品投资经理、国泰君安资管金融市场部投资经理、担任上海银行易精灵产品经理期间，产品规模从不足10亿元增长到近150亿元，担任国泰君安"双利一号"产品经理期间，为客户创造了30%的年华收益</view>
				</view>
			</view>
			
			<view v-if="xz=='two'" class="card" style="font-size: 22rpx;">
				<view style="padding-bottom: 24rpx;border-bottom: 1rpx solid #dddddd;font-size: 28rpx;">查看协议</view>
				<view v-for="item in http" :key="item.id" style="padding: 24rpx 0;border-bottom: 1rpx solid #dddddd;display: flex;justify-content: space-between;">
					<view class="">{{item.text}}</view>
					<image style="width: 30rpx;height: 30rpx;" :src="item.icon" mode=""></image>
				</view>
			</view>
			
			
			<!-- 基本问题 -->
			<view v-if="xz=='three'" class="card" style="font-size: 24rpx;">
				<view style="margin-top: 30rpx;" v-for="item in problem" :key="item.id">
					<view style="width: 100%;text-align: right;">
						<text style="display: inline-block;padding: 24rpx;background-color: #007AFF;color: white;border-radius: 10rpx;">{{item.questions}}</text>
					</view>
					<view style="border-radius: 10rpx;width: 100%;border: 1rpx solid #dddddd; padding: 24rpx;box-sizing: border-box;margin-top: 30rpx;line-height: 44rpx;">
						{{item.answer}}
					</view>
				</view>
				
			</view>




			<view class="footer">
				<view class="foot_left" @click="open">
					<image style="width: 36rpx;height: 48rpx;margin-top: 20rpx;" src="../../static/regular/computer.png"
						mode=""></image>
				</view>
				<view class="foot_btn">
					立即购买
				</view>
			</view>
		</view>
		
		<view v-if="zhe" style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;"></view>
		
		<drawer :classname="'active900'" ref="drawer" v-on:onHide="onHideDrawer" style="color: #666666;box-sizing: border-box;">
				<view style="width: 100%;text-align: center;font-size: 30rpx;position: absolute;top: 30rpx;">
					收益计算器
				</view>
				<text @click="close2" style="font-size: 50rpx;position: absolute;right: 30rpx;top: 22rpx;">x</text>
				<view style="position: absolute;top: 100rpx;left: 24rpx;">
					<view style="color: #cccccc;">
						投资金额(元)
					</view>
					<input style="width: 654rpx;background-color: white;margin-top: 16rpx;height: 60rpx;" type="text" v-model="money"/>
				</view>
				<view style="position: absolute;top: 220rpx;left: 24rpx;">
					<view style="color: #cccccc;">
						据业绩比较基准28天后可赚
					</view>
					<input style="width: 654rpx;background-color: white;margin-top: 16rpx;height: 60rpx;color: red;" type="text" v-model="parseFloat(money*kNum).toFixed(2)" />
				</view>
				<view @click="close2" style="width: 100%;height: 80rpx;background-color: #dddddd;position: absolute;top: 430rpx;text-align: center;line-height: 80rpx;">
					返回
				</view>
		</drawer>
	</view>
</template>

<script>
	import drawer from "../../components/drawer_x/drawer_x.vue"
	export default {
		components: {	drawer},
		data() {
			return {
				cycle: [{
						text: '购买',
						data: '2021/3/15'
					},
					{
						text: '计算收益',
						data: '2021/3/18'
					},
					{
						text: '发放收益',
						data: '2021/4/10'
					},
					{
						text: '到账',
						data: '2个交易日内'
					},
				],
				card_img: [{
						id: 1,
						img: '../../static/regular/dil1.png',
						text: '知名金融机构'
					},
					{
						id: 2,
						img: '../../static/regular/dil2.png',
						text: '精选优质产品'
					},
					{
						id: 3,
						img: '../../static/regular/dil3.png',
						text: '监管机构备案'
					},
				],
				information: [{
						id: 1,
						text: '交易规则',
						pd: true,
						xz:'one'
					},
					{
						id: 2,
						text: '信息披露',
						pd: false,
						xz:'two'
					},
					{
						id: 3,
						text: '常见问题',
						pd: false,
						xz:'three'
					},
				],
				yhList: [{
						id: 1,
						text: '工行',
						icon: '../../static/regular/yh1.png',
						onceNum: '5万',
						oneDay: '5万'
					},
					{
						id: 2,
						text: '农行',
						icon: '../../static/regular/yh2.png',
						onceNum: '5000',
						oneDay: '5000'
					},
					{
						id: 3,
						text: '中行',
						icon: '../../static/regular/yh3.png',
						onceNum: '20万',
						oneDay: '20万'
					},
					{
						id: 4,
						text: '建行',
						icon: '../../static/regular/yh5.png',
						onceNum: '10万',
						oneDay: '10万'
					},
					{
						id: 5,
						text: '交行',
						icon: '../../static/regular/yh6.png',
						onceNum: '10万',
						oneDay: '10万'
					},
					{
						id: 6,
						text: '招行',
						icon: '../../static/regular/yh7.png',
						onceNum: '5000',
						oneDay: '5000'
					},
					{
						id: 7,
						text: '广发',
						icon: '../../static/regular/yh8.png',
						onceNum: '200万',
						oneDay: '200万'
					},
					{
						id: 8,
						text: '平安',
						icon: '../../static/regular/yh9.png',
						onceNum: '5万',
						oneDay: '5万'
					}
				],
				money:10000,
				kNum:0.002685,
				zhe:false,
				xz:'one',
				http:[
					{id:1,text:'《管理合同》',icon:'../../static/regular/right.png'},
					{id:2,text:'《说明书》',icon:'../../static/regular/right.png'},
					{id:3,text:'《风险提示书》',icon:'../../static/regular/right.png'},
					{id:4,text:'《电子签名约定书》',icon:'../../static/regular/right.png'},
					{id:5,text:'《服务协议及权益通知》',icon:'../../static/regular/right.png'},
				],
				problem:[
					{id:1,questions:'什么是券商资管产品？',answer:'券商资管是一款由证券公司或其资管子公司出品的资产管理计划，由具备资质的证券公司发行并管理，受证监会监管,投资品种涵盖了证券交易所和银行间市场的资产;具有集合理财，专业管理,组合投资,分散风险的特点。'},
					{id:2,questions:'什么是开放日？',answer:'资管产品按周期运作，一般在约定开放日的10点~15点，向投资人开放购买/领取;其余时间均封闭运作。若约定的开放日为非交易日，资管公司可能提前开放或顺延，具体以资管公司的公告为准。'},
					{id:3,questions:'什么时候产生收益？收益什么时候发放？',answer:'券商资管是一款由证券公司或其资管子公司出品的资产管理计划，由具备资质的证券公司发行并管理，受证监会监管,投资品种涵盖了证券交易所和银行间市场的资产;具有集合理财，专业管理,组合投资,分散风险的特点。'},
				]
			}
		},
		methods: {
			changMain(id) {
				this.information.forEach(item => {
					if (item.id == id) {
						item.pd = true
						this.xz=item.xz
					} else {
						item.pd = false
					}
				})
			},
			open(){
				this.$refs.drawer.open();
				this.zhe=true
			},
			close2(){
				this.$refs.drawer.close();
				this.zhe=false
			}
		}
	}
</script>

<style>
	.head {
		height: 450rpx;
		background-image: url(../../static/regular/detalis.png);
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		overflow: hidden;
		background-size: cover;
		/* #ifndef MP-WEIXIN */
		padding-top: 50rpx;
		/* #endif */
	}

	.bottom {
		display: flex;
		margin-top: 50rpx;
		justify-content: space-around;
	}

	.main {
		width: 100%;
		border-radius: 50rpx 50rpx 0 0;
		background-color: white;
		margin-top: -50rpx;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 88rpx;
	}

	.hr {
		width: 10rpx;
		height: 35rpx;
		background-color: #3476F1;
		align-items: center;
		border-radius: 5rpx;
	}

	.hr_x {
		width: 60rpx;
		height: 10rpx;
		background-color: #3476F1;
		margin: auto;
		border-radius: 5rpx;
		margin-top: 10rpx;
	}

	.titleOne {
		display: flex;
		align-items: flex-end;
		margin-top: 24rpx;
	}

	.title_text {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.card {
		padding: 20rpx;
		width: 100%;
		box-shadow: 0 0 5rpx 3rpx #dddddd;
		margin-top: 24rpx;
		border-radius: 6rpx;
	}

	.ball_fa {
		display: flex;
		align-items: center;
		color: #dddddd;
	}

	.ball {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		border: 1rpx solid #dddddd;
	}

	.ball_blue {
		border: none;
		background-color: #007AFF;
	}

	.data {
		margin-top: 15rpx;
		font-size: 24rpx;
	}

	.card_main {
		margin-top: 20rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #dddddd;
		display: flex;
	}

	.quan {
		width: 94rpx;
		height: 94rpx;
		text-align: center;
		line-height: 94rpx;
		border-radius: 50%;
		border: #007AFF solid 1rpx;
		margin: auto;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		margin-top: 18rpx;
	}

	.explain {
		width: 100%;
		padding-top: 20rpx;
		border-top: 1rpx solid #dddddd;
		margin-top: 20rpx;
	}

	.title_two {
		margin-top: 20rpx;
		display: flex;
	}

	.info {
		color: #007AFF;
		font-size: 32rpx;
		font-weight: bold;
	}

	uni-tr {
		display: flex;
	}

	uni-th,
	uni-td {
		border: 1rpx solid #dddddd;
		text-align: center;
		padding: 16rpx 0;
		color: #666666;
		width: 234rpx;
	}

	uni-th {
		font-size: 22rpx;
	}

	.yh_icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 24rpx;
	}

	.footer {
		height: 88rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
	}

	.foot_btn {
		width: 640rpx;
		height: 88rpx;
		background-color: #007AFF;
		color: white;
		text-align: center;
		line-height: 88rpx;
	}

	.foot_left {
		width: 110rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: white;
	}
	drawer{
	}
</style>
